<template>
  <div class="app-container">
    <p class="title">添加菜单</p>
    <el-form
      label-width="100px"
      :model="formData"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="菜单名称" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="上级菜单">
        <!-- <el-select v-model="formData.parentId">
          <el-option label="无上级菜单" :value="0" />
          <el-option
            v-for="item in mainMenu"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select> -->
        <el-popover width="400" trigger="click" placement="bottom-start">
          <el-tree
            :props="defaulProps"
            :data="treeMenus"
            node-key="id"
            :expand-on-click-node="false"
          >
            <div slot-scope="{ node }">
              <el-radio v-model="selectedMenu" :label="node">{{
                node.label
              }}</el-radio>
            </div>
          </el-tree>
          <el-button type="text" slot="reference">{{
            selectedMenu ? selectedMenu.label : '请选择上级菜单'
          }}</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item label="前端名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="前端图标" prop="icon">
        <el-input v-model="formData.icon" />
      </el-form-item>
      <el-form-item label="是否显示">
        <el-radio v-model="formData.hidden" :label="1">是</el-radio>
        <el-radio v-model="formData.hidden" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="formData.sort" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmit"
          >提交</el-button
        >
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { add, edit, getInfo, getChildList, getTree } from '@/api/menu'

export default {
  name: 'AddMenu',
  data() {
    return {
      type: 'add',
      mainMenu: [],
      treeMenus: [],
      formData: {
        title: '',
        parentId: 0,
        name: '',
        icon: '',
        hidden: 1,
        sort: ''
      },
      rules: {
        title: [{ required: true, trigger: 'blur', message: '请填写菜单名称' }],
        name: [{ required: true, trigger: 'blur', message: '请填写前端名称' }],
        icon: [
          { required: true, trigger: 'blur', message: '请填写前端图标名称' }
        ],
        sort: [{ required: true, trigger: 'blur', message: '请填写排序值' }]
      },
      // el-tree的默认props
      defaulProps: {
        children: 'children',
        label: 'title'
      },
      selectedMenu: null,
      loading: false
    }
  },
  async created() {
    await this.getTreeList()
    const id = this.$route.params.id
    if (id) {
      this.type = 'edit'
      this.id = id
      this.getMenuInfo(id)
    }
    this.getMainList()
  },
  methods: {
    // 获取菜单信息
    getMenuInfo(id) {
      getInfo(id).then(res => {
        this.formData = res.data
        const parentMenu = this.getMenuByParentId(
          res.data.parentId,
          this.treeMenus
        )
        if (parentMenu) {
          const { id, title } = parentMenu
          this.selectedMenu = { id, label: title }
        }
      })
    },
    // 获取一级菜单
    getMainList() {
      getChildList(0).then(res => {
        this.mainMenu = res.data
      })
    },
    // 获取树状菜单
    getTreeList() {
      return getTree(0).then(res => {
        const treeData = [
          {
            id: 0,
            title: '根级菜单',
            children: []
          }
        ]
        if (res.code === 200) {
          treeData[0].children = res.data
        }
        this.treeMenus = treeData
      })
    },
    getMenuByParentId(id, arr) {
      let res = null
      for (let i = 0, len = arr.length; i < len; i++) {
        if (arr[i].id === id) {
          return arr[i]
        } else if (arr[i].children) {
          res = this.getMenuByParentId(id, arr[i].children)
        }
      }
      return res
    },
    onSubmit() {
      if (!this.selectedMenu) {
        this.$message.error('请选择上级菜单')
        return
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          let requestPromise
          const params = { ...this.formData }
          if (this.type === 'edit') {
            params.id = this.id
            requestPromise = edit(params)
          } else {
            requestPromise = add(params)
          }
          requestPromise.then(res => {
            this.loading = false
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.$router.push('/auth/menu')
            }
          })
        } else {
          this.$message.error('请正确填写')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 24px;
  font-weight: bold;
}
.el-input {
  width: 180px;
}
</style>
